<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
		<div id="okk">
			<audio :src="currentSong" autoplay="" controls="" @ended="nextsong()"> </audio>
			<ul>
				<li v-for="(item,index) in songs" @click="clickHandle(index)">
					<h3>歌手:{{item.name}}====
						歌名:{{item.title}}</h3>
				</li>
			</ul>

		</div>

		<script>
			var songs = [{
					id: 1,
					name: '杨烁 ',
					title: '走在乡间的小路上',
					src: './audio/走在乡间的小路上.mp3'
				},
				{
					id: 2,
					name: '杨丽',
					title: '笑看风云',
					src: './audio/笑看风云.mp3'
				},
				{
					id: 3,
					name: '金南玲',
					title: '逆流成河',
					src: './audio/逆流成河.mp3'
				},
				{
					id: 4,
					name: '齐秦',
					title: '狼',
					src: './audio/狼.mp3'
				}
			]


			new Vue({
				el: '#okk',
				data: {
					songs: songs,
					currentSong: './audio/走在乡间的小路上.mp3',
					currentIndex: 0,
				},
				methods: {
					clickHandle: function(index) {
						console.log(this);
						// console.log(this.songs[index])
						this.currentSong = this.songs[index].src;
						this.currentIndex = index; //参数为index时
						// this.currentSong = item.src;   //参数为item时
					},
					nextsong: function() {
						// alert(111);
						// alert(this.currentIndex);
						console.log(this.songs.length);
						console.log(this.currentIndex);
						if (this.currentIndex == this.songs.length - 1) {
							this.currentIndex = -1;
						}
						this.currentIndex++;
						console.log(this.currentIndex);
						this.currentSong = this.songs[this.currentIndex].src;

					}
				}

			})
		</script>
	</body>
</html>
